import React,{Component} from "react"

import {Link} from "react-router-dom";
import BScroll  from "better-scroll";

import img1 from "../../images/num1.png"
import img2 from "../../images/num2.png"
import img3 from "../../images/num3.png"
import editImg from "../../images/mywork.png"
import addrankImg from "../../images/addrank.png"
import loadingImg from "../../images/loading.gif"
import "./index.css"

import {getCourseList,getRankList} from "../../api/course"

function toZero(n){
  return n>9 ? ""+n:"0"+n
}



class Index extends Component{
    constructor(props){
    	super(props);
    	this.state = {
            nowIndex:0,
            tabbar:["热门","导师排行"],
            hotlist:[],
            ranklist:[],
            hotPage:0,
            nowDate:"",
            nowIndex:1,
            pageloading:false,
           tabbar:["课程列表","排行列表"],
           courselink:true
    	}
    }
    

    

    componentDidMount(){
        let that =this
        let login = localStorage.getItem('loginadmin') 
        if(!login){
           that.props.history.push(this.state.courselink?'./loginadmin':'/fanscourse/loginadmin')
           return
        }
        that.setState({pageloading:true})
      this.loadHot();
      this.loadRank();
      this.gethotlist(0,10);
      this.getRanklist(0);
    	this.getDate();
    }

    getDate(){
        this.setState({
           nowDate:new Date().getFullYear()+"-"+toZero((new Date().getMonth()+1))+"-"+toZero(new Date().getDate())
        })
    }

    getRanklist(){
       getRankList(0).then(res=>{
           this.setState({
            ranklist:JSON.parse(res.data.data.data),
            pageloading:false
           })
         console.log(res)
       })
    }
    
    
    gethotlist(page){
      getCourseList(page,10).then(res=>{
         this.setState({
            hotlist:[...this.state.hotlist,...res.data]
         })
      })
    }



    loadHot(){
    	// this.hot = new BScroll(this.refs.hot,{
        //     scrollY: true,
        //     click: true,
        //     pullUpLoad: {
        //       threshold:-20 
        //     },
        //     pullDownRefresh: {
        //        threshold:30,
        //        stop: 0
        //     }
        // })
        
        
        // this.hot.on('pullingUp',()=>{
        //     //console.log("到底部了")
        //     this.setState({
        //        hotPage:this.state.hotPage+10
        //     },()=>{
        //       this.gethotlist(this.state.hotPage)
        //     })
            
        //     setTimeout(() => {
        //         this.hot.finishPullUp();
        //         this.hot.refresh();
        //     },500)
         
        // })
    }

    loadRank(){
        this.ranklist = new BScroll(this.refs.ranklist,{
            scrollY: true,
            click: true,
            pullUpLoad: {
              threshold:-20 
            },
            pullDownRefresh: {
               threshold:30,
               stop: 0
            }
        })
        
        
        this.ranklist.on('pullingUp',()=>{
            setTimeout(() => {
                this.ranklist.finishPullUp();
                this.ranklist.refresh();
            },500)
        })
    }


    tabHandl(nowIndex){
    	 this.setState({
    	 	nowIndex
    	 })
    }
    edit(e){
        let id = e._id.$oid
        this.props.history.push(this.state.courselink?'./rankadmin/' + id:'/fanscourse/rankadmin/' + id)
    }
    addrank(){
        this.props.history.push(this.state.courselink?'./rankadmin/add':'/fanscourse/rankadmin/add')
    }
    tabHandl(nowIndex){
        if(nowIndex == '0'){
            this.props.history.push(this.state.courselink?'./courselist':'/fanscourse/courselist')
        }else{
            this.props.history.push(this.state.courselink?'./ranklist':'/fanscourse/ranklist')
        }
   }
	render(){
		let {tabbar,nowIndex,ranklist,hotlist,nowDate} = this.state;
		return(
            <div className="rankindex">
                <div className="tab">
                    {tabbar.map((item,index) => <span key={index} 
                            className={nowIndex===index?"active":""} 
                            onClick={this.tabHandl.bind(this,index)}>
                            {item}
                    </span>)}
                </div>
                <div className="rank">
                    <div className="rank-box">
                          <div className="top">
                              <div className="titleimg"></div>
                              <p>数据更新时间：{nowDate}</p> 
                              <div className="rankbg"></div>
                          </div>
                          <div className="ranklist" ref="ranklist">
                              <div className='addrank' onClick={this.addrank.bind(this)}><img src={addrankImg}/></div>
                          <ul>
                             {ranklist.map((item,index)=>{
                                return <li key={index}>
                                    {index===0?<img src={img1} alt="" className="numimg"/>:null}
                                    {index===1?<img src={img2} alt="" className="numimg"/>:null}
                                    {index===2?<img src={img3} alt="" className="numimg"/>:null}
                                    {index>2?<span className="numtext">{index+1}</span>:null}
                                    <div className='edit' onClick={this.edit.bind(this,item)}><img src={editImg}/></div>
                                <dl>
                                   <dt>
                                      <img src={item.imgurl} alt=""/>
                                   </dt>
                                   <dd>
                                        <div>
                             <h3>{item.coursetutor}</h3>
                             <em>@{item.weibo}</em>
                                        </div>
                                        <p>
                             <span>总热度：<br/>{item.heatcount}</span>
                             <span>播放指数：<br/>{item.platcount}</span>
                             <span>分享指数：<br/>{item.watchcount}</span>
                             <span>阅读指数：<br/>{item.readcount}</span>
                                        </p>
                                   </dd>
                               </dl>
                            </li>
                             })}
                          </ul>  
                        </div>   
                    </div>
                </div>
                {this.state.pageloading?<div className='popuploading' >
                   <div className='loading'><img src={loadingImg}/></div>
               </div>:''}
            </div>
		)
	}
}


export default Index